<template>
  <div>
    <div>
      <div style="margin-top: 10px;">
        <el-radio-group size="mini" v-model="value1">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="我负责的"></el-radio-button>
          <el-radio-button label="我收藏的"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="margin-top: 10px; ">
        <el-input style="width:100%" size="mini" suffix-icon="el-icon-search" v-model="value2"
                  placeholder="文件名称/创建人"></el-input>
        <!--          <div style="float: right; margin-right: 9px;margin-top: 5px ">-->
        <!--              <svg-icon-->
        <!--              class="circle"-->
        <!--              icon-class="filter"/>-->
        <!--          </div>-->
      </div>
      <div :style="{ margin:'10px 0 0 0',height: documentHeight-220 + 'px', overflow:'auto' }">
        <el-tree :default-expanded-keys="nodeId" node-key="id" :expand-on-click-node="false"
                 @node-click="handleNodeDblClick" :filter-node-method="filterNode" ref="tree" :data="data"
                 :props="defaultProps">
          <div style="width:100%;display: flex;align-items: center" slot-scope="{ node,data }">
            <i v-if="data.$treeNodeId==1||data.type==='menu'"></i>
            <i style="margin-right: 5px" v-else-if="data.type==='flow'">
              <svg-icon icon-class="tree" />
            </i>
            <span v-else style="margin:2px 2px 0 0;text-align: center "> <svg-icon style="font-size: 16px" :icon-class="data.icon" /></span>
              <span style="width: 100%;" :title="`创建人:${data.createUser||''}\n创建时间:${data.createTime ||''}\n修改人:${data.updateUser||''}\n修改时间:${data.updateTime||''}`">{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
    </div>
    <el-dialog
      :title="nodeTitle"
      :visible.sync="nodedialogVisible"
      :width="dialogWidth"
      :before-close="nodehandleClose"
      :top="dialogTop"
      :close-on-click-modal=false
      class="nodeDialog"
      :onselectstart="false"
    >
      <!--        <el-form style="margin-left: 40px" :model="nodename">-->
      <!--          <el-form-item label="步骤名称" label-width="80px">-->
      <!--            <el-input :style="{width: inputWidth}" size="mini" v-model="nodename.name" autocomplete="off"></el-input>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <span>
            <nodeContainers v-if="nodeType==='Sync Offline'" ref="nodeContainers"></nodeContainers>
            <nodeSql ref="nodeSql" v-if="nodeType==='Exec Sql'"></nodeSql>
            <nodeHttp ref="nodeHttp" v-if="nodeType==='Http Request'"></nodeHttp>
            <nodeCollect ref="nodeCollect" v-if="nodeType==='Fetch Data'"></nodeCollect>
            <nodeCollectOne ref="nodeCollectOne" v-if="nodeType==='Fetch One'"></nodeCollectOne>
          </span>
      <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="nodehandleClose()">取 消</el-button>
           <el-button type="primary" size="mini" @click="saveNode()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import Print from "@/util/print";
import axios from "axios";
import nodeHttp from "@/views/datadevelop/components/nodeHttp.vue";
import nodeContainers from "@/views/datadevelop/components/nodeContainers.vue";
import nodeCollect from "@/views/datadevelop/components/nodeCollect.vue";
import nodeCollectOne from "@/views/datadevelop/components/nodeCollectOne.vue";
import nodeSql from "@/views/datadevelop/components/nodesql.vue";

export default {
  name: "demo1",
  components: { nodeSql, nodeCollectOne, nodeCollect, nodeContainers, nodeHttp },
  data() {
    return {
      value1: "全部",
      value2: "",
      datacopy: {},  //右键拿到当前点击元素的值
      datacopy2: "",
      menuVisible: false,
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      nodeCount: 0,
      preNodeId: null,
      curNodeId: null,
      nodeTimer: null,
      nodeTitle: "",
      nodedialogVisible: false,
      dialogWidth: "",
      dialogTop: "",
      nodeType: "",
      nodeId: []
    };
  },
  watch: {
    value2(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleNodeDblClick(data, node, prop) {
      // console.log(data,'单机节点事件')
      this.$emit("addflow", data);
      this.$emit("addtabs", { data: data });
      // this.nodeCount++
      // if(this.preNodeId && this.nodeCount >= 2){
      //   this.curNodeId = data.id
      //   this.nodeCount = 0
      //   if(this.curNodeId === this.preNodeId){//第一次点击的节点和第二次点击的节点id相同
      //     console.log('双击,执行代码写在这里',data);
      //     this.nodeType = data.componentType;
      //     this.nodeTitle = `节点${data.name}信息`;
      //     if (this.nodeType === "Sync Offline") {
      //       this.dialogWidth = "70%";
      //       this.inputWidth = "10%";
      //       this.dialogTop = "10px";
      //       this.getOffline(data);
      //     }
      //     if (this.nodeType === "Http Request") {
      //       this.dialogWidth = "50%";
      //       this.inputWidth = "90%";
      //       this.dialogTop = "200px";
      //       this.getHttp(data);
      //     }
      //     if (this.nodeType === "Exec Sql") {
      //       this.dialogWidth = "50%";
      //       this.inputWidth = "90%";
      //       this.dialogTop = "200px";
      //       this.getSql(data);
      //     }
      //     if (this.nodeType === "Fetch Data") {
      //       this.dialogWidth = "50%";
      //       this.inputWidth = "90%";
      //       this.dialogTop = "200px";
      //       this.getCollect(data);
      //     }
      //     if (this.nodeType === "Fetch One") {
      //       this.dialogWidth = "50%";
      //       this.inputWidth = "90%";
      //       this.dialogTop = "200px";
      //       this.getCollectOne(data);
      //     }
      //     // this.nodename.name = node.store.data.attrs.label.text;
      //     // this.nodename.nodeId = node.id;
      //     this.nodedialogVisible = true;
      //     this.curNodeId = null
      //     this.preNodeId = null
      //     return
      //   }
      // }
      // this.preNodeId = data.id
      // this.nodeTimer = setTimeout(() => { //300ms内没有第二次点击就把第一次点击的清空
      //   this.preNodeId  = null
      //   this.nodeCount = 0
      // },1000)
    },
    gettreedata() {
      this.$http.post("/flowMenu/getFlowMenu", {}).then((data) => {
        var treedata = [];
        var msg = data.data;
        msg.forEach(item => handle(item));

        function handle(data) {
          if (data.hasOwnProperty("children")) {
            const children = data.children;
            const map = new Map();
            children.forEach(item => {
              handle(item);
              if (item.hasOwnProperty("componentType")) {
                let arr = map.get(item.componentType) || [];
                arr.push(item);
                map.set(item.componentType, arr);
              }
            });
            if (map.size > 0) {
              data.children = [];
              map.forEach((value, key) => {
                if (key === "Sync Offline") {
                  data.children.push(
                    {
                      children: value,
                      name: "离线同步",
                      parentId: value[0].parentId,
                      icon: "di"
                    }
                  );
                }
                if (key === "Exec Sql") {
                  data.children.push(
                    {
                      children: value,
                      name: "执行sql",
                      parentId: value[0].parentId,
                      icon: "SQL"
                    }
                  );
                }
                if (key === "Fetch Data") {
                  data.children.push(
                    {
                      children: value,
                      name: "数据抓取(集合)",
                      parentId: value[0].parentId,
                      icon: "fetch"
                    }
                  );
                }
                if (key === "Fetch One") {
                  data.children.push(
                    {
                      children: value,
                      name: "数据抓取(单笔)",
                      parentId: value[0].parentId,
                      icon: "fetch"
                    }
                  );
                }
                if (key === "Http Request") {
                  data.children.push(
                    {
                      children: value,
                      name: "Http",
                      parentId: value[0].parentId,
                      icon: "http"
                    }
                  );
                }
                if (key === "Case") {
                  data.children.push(
                    {
                      children: value,
                      name: "条件分支",
                      parentId: value[0].parentId,
                      icon: "case"
                    }
                  );
                }
              });
            }
          }
        }

        const geticon = (msg) => {
          msg.forEach((item) => {
            if (item.children) {
              if (item.type === "menu") {
                this.nodeId.push(item.id);
              }
              geticon(item.children);
            } else {
              if (item.componentType === "Sync Offline") {
                item.icon = "di";
              }
              if (item.componentType === "Fetch Data") {
                item.icon = "fetch";
              }
              if (item.componentType === "Http Request") {
                item.icon = "http";
              }
              if (item.componentType === "Exec Sql") {
                item.icon = "SQL";
              }
              if (item.componentType === "Case") {
                item.icon = "case";
              }
            }
          });
        };
        geticon(msg);
        this.data = msg;
      });
    },
    getOffline(data) {
      let querydata = {
        flowInfoId: data.flowInfoId,
        componentSeq: data.componentSeq
      };
      this.$http.post("/offlineSync/getSyncOffline", querydata).then((res) => {
        // console.log(res);
        // if (res.data) {
        this.$refs.nodeContainers.invertData(res.data);
        // }
      });
    },
    getHttp(data) {
      let querydata = {
        flowInfoId: data.flowInfoId,
        componentSeq: data.componentSeq
      };
      this.$http.post("/httpRequest/getHttpRequest", querydata).then((res) => {
        // console.log(res);
        // if (res.data) {
        this.$refs.nodeHttp.invertData(res.data);
        // }
      });
    },
    getSql(data) {
      let querydata = {
        flowInfoId: data.flowInfoId,
        componentSeq: data.componentSeq
      };
      this.$http.post("/execSql/getExecSql", querydata).then((res) => {
        // console.log(res);
        if (res.data) {
          this.$refs.nodeSql.invertData(res.data);
        }
      });
    },
    getCollect(data) {
      let querydata = {
        flowInfoId: data.flowInfoId,
        componentSeq: data.componentSeq
      };
      this.$http.post("/fetchData/getFetchData", querydata).then((res) => {
        // console.log(res);
        if (res.data) {
          this.$refs.nodeCollect.invertData(res.data);
        }
      });
    },
    getCollectOne(data) {
      let querydata = {
        flowInfoId: data.flowInfoId,
        componentSeq: data.componentSeq
      };
      this.$http.post("/fetchOne/getFetchOne", querydata).then((res) => {
        // console.log(res);
        if (res.data) {
          this.$refs.nodeCollectOne.invertData(res.data);
        }
      });
    },
    nodehandleClose() {
      if (this.$refs.nodeContainers) {
        this.$refs.nodeContainers.restForm();
      }
      this.nodedialogVisible = false;
    }
  },
  computed: {
    documentHeight() {
      return this.$store.getters.documentHeight;
    },
    lastHeight() {
      return this.documentHeight - 130;
    }
  },
  created() {
    this.$bus.$on("getTreeData", () => {
      this.gettreedata();
    });
    this.gettreedata();
  }
  // beforeDestroy() {
  //   this.bus.$off('my-event');
  // },
};
</script>

<style scoped>
.box-card {
    width: 150px;
    position: absolute;
    z-index: 1000;
}
</style>
  